<template>
    <div >

        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">

            <div class="container" style="margin-top:20px;">
                <h3>新增仓库</h3>
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="仓库名称：" prop="name">
                        <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width:300px">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="仓库管理员：" prop="settleType">
                            <el-select v-model="ruleForm.settleType" placeholder="请选择" style="width:300px">
                                <el-option
                                v-for="item in settleTypelist"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="仓库地址：" prop="address">
							<el-input placeholder="请输入内容" v-model="ruleForm.address" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="仓库面积：" prop="area">
							<el-input placeholder="请输入内容" v-model="ruleForm.area" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
				<div>
					仓位设置：
				</div>
				<el-row v-for="(item,index) in positionList">
					<el-col :span="12">
						<el-form-item label="仓位号：" prop="name">
							<el-input placeholder="请输入内容" v-model="item.name" style="width:300px">
						    </el-input>
						</el-form-item>
						<el-form-item label="仓位容量：" prop="volume">
							<el-input placeholder="请输入内容" v-model="item.volume" style="width:300px">
						    </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="仓库类型：" prop="type">
							<el-input placeholder="请输入内容" v-model="item.type" style="width:300px">
						    </el-input>
						</el-form-item>
						<el-form-item label="仓库管理员：" prop="address">
							<!-- <el-input placeholder="请输入内容" v-model="item.address" style="width:300px">
						    </el-input> -->
						</el-form-item>
					</el-col>
					<el-col v-for="(item1,index) in item.shelvesList">
						<el-form-item label="货架号：" prop="name">
							<el-input placeholder="请输入内容" v-model="item1.name" style="width:300px">
						    </el-input>
						</el-form-item>
						<el-form-item label="上传土地证："  >
						      <upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item   >
							   <el-button type="primary" @click="addgoodsShelf(index)">增加货架</el-button>
						</el-form-item>
					  </el-col>


					<!-- <el-col style="margin-top:30px;"> -->
						<!-- <el-form-item   style="margin: 0 auto;"> -->
						       <!-- <el-button type="primary" @click="submitrule('ruleForm')" >增加仓位</el-button> -->
						<!-- </el-form-item> -->
					<!-- </el-col> -->
				</el-row>

               <el-row>

                  <el-col>
                  	<div style="width:100%;">
                  		<el-button type="primary" @click="addcw"  style="margin: 0 auto;" >增加仓位</el-button>
                  	</div>
                  </el-col>
                </el-row>
            </div>


            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
	import axios from "axios"
	import uploadImg from '../../../common/uploadImg';
    import {client_save,client_findById,client_update} from '@/request/api'
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {
		components: {
		    uploadImg
		},
        data() {
            return {
				positionList:[
					{
						address:'',
						shelvesList:[{
							name:'',
							img:''
						}]
					}
				],
				listUrl1:'',
                isShow:false,
                city:'',
                area:'',

				settleTypelist:[],
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',

                ruleForm: {

                },
                rules:{

                },
				id:''
            };
        },
        mounted(){
			this.id = this.$route.query.id
           if(this.id == undefined){

           }else{
               this.init()
           }
        },
        methods: {
			// 根据id 获取详细信息
            init(){
                axios.get("http://47.108.220.160:90/jcApi/plant/control/storeHouse/findById/"+this.id).then((res)=>{
                	this.ruleForm = res.data.data

					this.positionList = this.ruleForm.positionList
                })
            },
			// 添加货架
			addgoodsShelf(index){
				this.positionList[index].shelvesList.push({name:'',img:''})
			},
			// 添加仓位
           addcw(){
			    this.positionList.push({
				   name:'',
				   type:'',
				   volume:'',
				   manageId:'',
				   shelvesList:[]
				})
		   },
		   // 返回上一页
            backPage () {
                this.$router.go(-1);
            },
			// 提交
            submitrule(formName) {
				this.ruleForm.positionList = this.positionList
				let data = this.ruleForm
                axios.post("http://47.108.220.160:90/jcApi/plant/control/storeHouse/save",data).then((res)=>{
                	this.$notify({
                	    title: '提示',
                	    message: '保存成功',
                	    type: 'success',
                	    duration: 500
                	});
                	this.backPage()
                })
            },


        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
